<%@page import="com.baozun.util.StringUtil"%>
<%@page import="com.baozun.util.ContactUtil"%>
<%@page import="com.baozun.util.CommonConst"%>
<%@page import="com.baozun.model.TUser"%>
<%@page import="com.baozun.model.TContact"%>
<%@page import="java.util.List"%>
<%@page import="com.baozun.util.items.SelectSet"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta name="description" content="Common form elements and layouts" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- basic styles -->

<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="../assets/css/font-awesome.min.css" />

<!--[if IE 7]>
		  <link rel="stylesheet" href="../assets/css/font-awesome-ie7.min.css" />
		<![endif]-->

<!-- page specific plugin styles -->

<link rel="stylesheet"
	href="../assets/css/jquery-ui-1.10.3.custom.min.css" />
<link rel="stylesheet" href="../assets/css/chosen.css" />
<link rel="stylesheet" href="../assets/css/datepicker.css" />
<link rel="stylesheet" href="../assets/css/bootstrap-timepicker.css" />
<link rel="stylesheet" href="../assets/css/daterangepicker.css" />
<link rel="stylesheet" href="../assets/css/colorpicker.css" />

<!-- fonts -->

<!-- link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" /-->
<link rel="stylesheet" href="../assets/css/font.css" />

<!-- ace styles -->

<link rel="stylesheet" href="../assets/css/ace.min.css" />
<link rel="stylesheet" href="../assets/css/ace-rtl.min.css" />
<link rel="stylesheet" href="../assets/css/ace-skins.min.css" />

<!--[if lte IE 8]>
		  <link rel="stylesheet" href="../assets/css/ace-ie.min.css" />
		<![endif]-->

<!-- inline styles related to this page -->

<!-- ace settings handler -->
<style>
	.header{
	margin-top:2px;
	}
</style>
<script src="../assets/js/ace-extra.min.js"></script>
</head>
<%
TUser user = (TUser)session.getAttribute(CommonConst.SESSION_USER);
List<TContact> contextContactList = (List<TContact>)session.getServletContext().getAttribute(CommonConst.CONTEXT_CONTACT_LIST);
List<TContact> contactList = ContactUtil.getUseableContact(contextContactList, user);
%>
<body onload="IFrameResize()">
	<div class="page-content">
		<div class="page-header">
			<h1>
				日志记录 <small> <i class="icon-double-angle-right"></i>
					新增日志
				</small>
			</h1>
		</div>
		<!-- /.page-header -->

		<div class="row">
			<div class="col-xs-13">
				<!-- PAGE CONTENT BEGINS -->
				<form class="form-horizontal" role="form" id="workrecord_add_form" name="workrecord_add_form" method="post" enctype="multipart/form-data">
					<input type="hidden" id="stWorkrecordId" name="stWorkrecordId" value=""/>
					<input type="hidden" id="stUserId" name="stUserId" value="<%=user.getStUserId()%>"/>
					<div class="form-group">
						<label class="col-sm-1 control-label no-padding-right"
							for="form-field-1"> 标题 </label>
						<div class="col-sm-9">
							<input type="text" placeholder="标题" name="stTitle" id="stTitle" class="col-xs-5 col-sm-5" />
						</div>
					</div>
					<div class="space-4"></div>
					<div class="form-group">
						<label class="col-sm-1 control-label no-padding-right"
							for="form-field-1"> 提出人 </label>

						<div class="col-sm-9">
							<select id="stContactId" name="stContactId" class="col-xs-5">
								<option value="">请选择...</option>
								<%for(TContact contact:contactList){%>
								<option value="<%=contact.getStContactId()%>"><%=StringUtil.param2Html(contact.getStContactName())%></option>
								<%}%>
							</select>
							<a href="javascript:;" onclick="javascript:openDialog('../contact/contact_add.jsp','新增联系人','300','400')">新增联系人</a>
						</div>
					</div>
					
					<div class="space-4"></div>
					
					<div class="form-group">
						<label class="col-sm-1 control-label no-padding-right"
							for="form-field-1"> 类型 </label>

						<div class="col-sm-9">
							<select id="stType" name="stType" class="col-xs-5">
								<option value="">&nbsp;&nbsp;</option>
								<%SelectSet.outputOptions(SelectSet.getWorkrecordType(), out);%>
							</select>
						</div>
					</div>
					
					<div class="space-4"></div>
					
					<div class="form-group">
						<label class="col-sm-1 control-label no-padding-right"
							for="form-field-1"> 优先级 </label>

						<div class="col-sm-9">
							<select name="stUrgentLevel" class="col-xs-5">
								<option value="">请选择...</option>
								<%SelectSet.outputOptions(SelectSet.getUrgentLevel(), out);%>
							</select>
						</div>
					</div>

					<div class="space-4"></div>

					<div class="form-group">
						<label class="col-sm-1 control-label no-padding-right"
							for="form-field-1"> 完成情况 </label>

						<div class="col-sm-9">
							<select name="stFinishLevel" class="col-xs-5">
								<option value="">请选择...</option>
								<%SelectSet.outputOptions(SelectSet.getFinishLevel(), out);%>
							</select>
						</div>
					</div>

					<div class="space-4"></div>

					<div class="form-group">
						<label class="col-sm-1 control-label no-padding-right"
							for="form-field-4">日志内容</label>
						<div class="col-sm-9">
								<textarea id="editor" style="height: 500px;width: 700px;"></textarea>
								<input type="hidden" value="" id="clContent" name="clContent"/>
								<div class="hr hr-double dotted"></div>
						</div>
					</div>
					<div class="widget-header">
						<h4>附件</h4>
							<span class="widget-toolbar">
								<a href="#" data-action="collapse">
									<i class="icon-chevron-up"></i>
								</a>
								<a href="#" data-action="close">
									<i class="icon-remove"></i>
									</a>
							</span>
						</div>
						<div class="widget-body">
							<div class="widget-main">
									<input type="file" id="id-input-file-2" name="files"/>
									<input multiple="" type="file" id="id-input-file-3" name="files"/>
									<label>
											<input type="checkbox" name="file-format" id="id-file-format" class="ace" />
											<span class="lbl">只选择图片</span>
									</label>
							</div>
						</div>
				</form>
				<div class="form-actions center"><button onclick="workrecordAdd()" class="btn btn-sm btn-success">保存</button>
					<button class="btn btn-sm btn-cancel" onclick="cancel()">取消</button></div>
				<!-- PAGE CONTENT ENDS -->
			</div>
			<iframe name="workrecord_quick_save_iframe" style="display: none;"></iframe>
			<!-- /.col -->
		</div>
		<!-- /.row -->
	</div>
	<!-- /.page-content -->

		<!-- page specific plugin scripts -->

		<!--[if lte IE 8]>
		  <script src="assets/js/excanvas.min.js"></script>
		<![endif]-->
	<script type="text/javascript" src="../assets/js/jquery-2.0.3.min.js"></script>
	<script src="../assets/js/bootstrap.min.js"></script>
	<script src="../assets/js/typeahead-bs2.min.js"></script>

		<!-- page specific plugin scripts -->

	<script src="../assets/js/jquery-ui-1.10.3.custom.min.js"></script>
	<script src="../assets/js/jquery.ui.touch-punch.min.js"></script>
	<script src="../assets/js/markdown/markdown.min.js"></script>
	<script src="../assets/js/markdown/bootstrap-markdown.min.js"></script>
	<script src="../assets/js/jquery.hotkeys.min.js"></script>
	<script src="../assets/js/bootstrap-wysiwyg.min.js"></script>
	<script src="../assets/js/bootbox.min.js"></script>
	<script src="../assets/js/ace-elements.min.js"></script>
	<script src="../assets/js/ace.min.js"></script>
	
	<!-- wysiwyg编辑器（what you see is what you get所见即所得编辑器） -->
	<script src="../kindeditor-4.1.10/kindeditor.js"></script>
	<script src="../kindeditor-4.1.10/lang/zh_CN.js"></script>
	<script src="../kindeditor-4.1.10/plugins/code/prettify.js"></script>
	<!-- artDialog插件 -->
	<script type="text/javascript" src="../js/artDialog/artDialog.source.js?skin=default"></script>
	<script type="text/javascript" src="../js/artDialog/plugins/iframeTools.source.js"></script>
	<script type="text/javascript" src="../js/openDialog.js"></script>
	<script type="text/javascript" src="../js/openDialogcustom.js"></script>
	
	<!-- 自定义函数 -->
	<script type="text/javascript">
	jQuery(function($){
		var userid = $("#stUserId").val();
		//其中uploadJson可以换成想要的文件处理服务器，参数可以定义成自己的路径
		KindEditor.ready(function(K) {
        window.editor = K.create('#editor', {
				cssPath : '../kindeditor-4.1.10/plugins/code/prettify.css',
				uploadJson : '../kindeditor-4.1.10/jsp/upload_json.jsp?path=user/photo/'+userid+'/',
				fileManagerJson : '../kindeditor-4.1.10/jsp/file_manager_json.jsp',
				allowFileManager : true,
				afterCreate : function() {
					//快捷键操作，按下ctrl+s后快速保存
					var self = this;
					K.ctrl(document, 83, function() {
						quickSave();
					});
					K.ctrl(self.edit.doc, 83, function() {
						quickSave();
					});
				}
			});
    });
		prettyPrint();
		
		$('#id-input-file-2').ace_file_input({
			no_file:'请选择文件 ...',
			btn_choose:'选择',
			btn_change:'更改',
			droppable:false,
			onchange:null,
			thumbnail:false //| true | large
			//whitelist:'gif|png|jpg|jpeg'
			//blacklist:'exe|php'
			//onchange:''
			//
		});
		
			$("#id-input-file-3").ace_file_input({
				style:'well',
				btn_choose:'拖动文件到此或点击选择',
				btn_change:null,
				no_icon:'icon-cloud-upload',
				droppable:true,
				thumbnail:'small'//large | fit
				//,icon_remove:null//set null, to hide remove/reset button
				/**,before_change:function(files, dropped) {
					//Check an example below
					//or examples/file-upload.html
					return true;
				}*/
				/**,before_remove : function() {
					return true;
				}*/
				,
				preview_error : function(filename, error_code) {
					//name of the file that failed
					//error_code values
					//1 = 'FILE_LOAD_FAILED',
					//2 = 'IMAGE_LOAD_FAILED',
					//3 = 'THUMBNAIL_FAILED'
					//alert(error_code);
				}
		
			}).on('change', function(){
				//console.log($(this).data('ace_input_files'));
				//console.log($(this).data('ace_input_method'));
			});
			
		
			//dynamically change allowed formats by changing before_change callback function
			$('#id-file-format').removeAttr('checked').on('change', function() {
				var before_change;
				var btn_choose;
				var no_icon;
				if(this.checked) {
					btn_choose = "拖动图片到此或点击选择";
					no_icon = "icon-picture";
					before_change = function(files, dropped) {
						var allowed_files = [];
						for(var i = 0 ; i < files.length; i++) {
							var file = files[i];
							if(typeof file === "string") {
								//IE8 and browsers that don't support File Object
								if(! (/\.(jpe?g|png|gif|bmp)$/i).test(file) ) return false;
							}
							else {
								var type = $.trim(file.type);
								if( ( type.length > 0 && ! (/^image\/(jpe?g|png|gif|bmp)$/i).test(type) )
										|| ( type.length == 0 && ! (/\.(jpe?g|png|gif|bmp)$/i).test(file.name) )//for android's default browser which gives an empty string for file.type
									) continue;//not an image so don't keep this file
							}
							
							allowed_files.push(file);
						}
						if(allowed_files.length == 0) return false;
		
						return allowed_files;
					};
				}
				else {
					btn_choose = "拖动文件到此或点击选择";
					no_icon = "icon-cloud-upload";
					before_change = function(files, dropped) {
						return files;
					};
				}
				var file_input = $("#id-input-file-3");
				file_input.ace_file_input('update_settings', {'before_change':before_change, 'btn_choose': btn_choose, 'no_icon':no_icon})
				file_input.ace_file_input('reset_input');
			});
			
			//扩展父窗口高度
			window.iframeResize = function(){  
		        var  dvalue = 0;  
		       // if($.browser.safari){  
		       //     dvalue = 67; 
		       // }  
		        parent.document.getElementById("workrecord_iframe").scrolling = "no";  
		        parent.document.getElementById("workrecord_iframe").height = "";  
		        parent.document.getElementById("workrecord_iframe").style.height = "";  
		        parent.document.getElementById("workrecord_iframe").height = document.body.scrollHeight + dvalue;  
		      };
		      if(window.iframeResize){  
		          window.iframeResize();  
		      }
		      parent.iFrameHeight();
	});
	 
	 //当前界面按下ctrl+s后的保存操作
	 function quickSave(){
		 if(isEmptyAndFocus("stTitle","标题不能为空")
				 && isEmptyAndFocus("stContactId", "联系人不能为空")
				 ){
			 editor.sync();
			 $("#clContent").val($("#editor").val());
			document.workrecord_add_form.action="workrecord_quick_save_submit.do";
			$("#workrecord_add_form").attr("target","workrecord_quick_save_iframe");
			document.workrecord_add_form.submit();
		 }else{
			 return false;
		 }
	 }
	 //快速保存后的ID
	 function quickId(stWorkrecordId){
		 $("#stWorkrecordId").val(stWorkrecordId);
	 }
	function isEmptyAndFocus(id,message){
		var obj = $("#"+id);
		if(obj.val() == null || obj.val() == ""){
			obj.focus();
			alert(message);
			return false;
		}else{
			return true;
		}
	}
 function workrecordAdd(){
	 if(isEmptyAndFocus("stTitle","标题不能为空")
			 && isEmptyAndFocus("stContactId", "联系人不能为空")
			 ){
		 editor.sync();
		 $("#clContent").val($("#editor").val());
		 document.workrecord_add_form.action="workrecord_add_submit.do";
		 $("#workrecord_add_form").removeAttr("target");
		 document.workrecord_add_form.submit();
	 }
 }
 
 //如果内容有编辑，退出时进行提醒是保存为草稿
 function cancel(){
	 history.back();
 }
 
 //添加联系人过后执行
 function process(){
	 $.ajax({
		 url:"../contact/contact_flush.do",
		 dataType:"json",
		 type:"post",
		 success:function(data,status){
			 var html = "<option value=\"\">请选择...</option>";
			 for(var i=0;i < data.length;i++){
				 html+="<option value=\"";
				 html+=data[i].stContactId;
				 html+="\">";
				 html+=data[i].stContactName;
				 html+="</option>";
			 }
			 $("#stContactId").html(html);
		 }
	 });
 }

	</script>
</body>
</html>